<template>
    <Header />
    <div class="wrap">
        <!-- 视频盒子 -->
        <div class="video_wrap">
            <div class="box">
                <videoPlay
                    width="1060px"
                    height="595px"
                    title="test"
                    :src="options.src"
                    :poster="options.poster"
                    @play="onPlay"
                    @pause="onPause"
                    @timeupdate="onTimeupdate"
                    @canplay="onCanplay"
                />
                <div class="video_bottom">
                    <div class="video_bottom_left">
                        <div class="left_icon">
                            <div class="shipin">
                                <svg
                                    t="1666159780982"
                                    class="icon"
                                    viewBox="0 0 1024 1024"
                                    version="1.1"
                                    xmlns="http://www.w3.org/2000/svg"
                                    p-id="17891"
                                    width="20"
                                    height="20"
                                >
                                    <path
                                        d="M855.75751 0H168.438062A170.229956 170.229956 0 0 0 0 168.182077v687.575433A170.229956 170.229956 0 0 0 168.438062 1023.939588h687.319448a172.789805 172.789805 0 0 0 122.104796-46.077282 172.533821 172.533821 0 0 0 46.077282-122.104796V168.182077A170.485941 170.485941 0 0 0 855.75751 0zM100.34608 848.589933V161.0145a68.091983 68.091983 0 0 1 68.091982-60.924405h687.319448a64.764179 64.764179 0 0 1 48.893116 22.270686 55.292738 55.292738 0 0 1 12.03129 45.821296v687.575433a68.091983 68.091983 0 0 1-68.091983 60.924406H161.270485a68.091983 68.091983 0 0 1-60.924405-68.091983z"
                                        p-id="17892"
                                        fill="#7d8090"
                                    ></path>
                                    <path
                                        d="M346.347565 772.818404a53.756828 53.756828 0 0 0 25.59849 6.143637 44.797357 44.797357 0 0 0 25.59849-7.167577l358.378856-215.027313a51.196979 51.196979 0 0 0 0-82.683122l-358.378856-215.283298a53.756828 53.756828 0 0 0-51.19698 0 43.261448 43.261448 0 0 0-20.478791 38.141749v436.966219a44.285387 44.285387 0 0 0 20.478791 38.909705z m69.115923-129.272373V380.393557L634.586559 511.969794z"
                                        p-id="17893"
                                        fill="#7d8090"
                                    ></path>
                                </svg>
                            </div>
                        </div>
                        <span v-if="!homeStore.videoPlay.statisticsBackup"
                            >12</span
                        >
                        <span v-else>{{
                            homeStore.videoPlay.statisticsBackup.viewCount
                        }}</span>
                        <!-- <span>12</span> -->
                        <div class="middle_icon">
                            <div class="dianzan"></div>
                            <span v-if="!homeStore.videoPlay.statisticsBackup"
                                >12</span
                            >
                            <span v-else>{{
                                homeStore.videoPlay.statisticsBackup.praiseCount
                            }}</span>
                        </div>
                        <div class="right_icon">
                            <div class="shoucang"></div>
                            <span v-if="!homeStore.videoPlay.statisticsBackup"
                                >12</span
                            >
                            <span v-else>{{
                                homeStore.videoPlay.statisticsBackup
                                    .favoriteCount
                            }}</span>
                        </div>
                    </div>

                    <div class="video_bottom_right">
                        <div class="left">
                            <svg
                                t="1666162716894"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="23647"
                                width="20"
                                height="20"
                            >
                                <path
                                    d="M910.90944 530.944c-17.24416-6.53312-33.25952-19.68128-48.47616-39.69024-22.75328-29.9008-37.66272-67.64544-46.14144-94.04416-7.20896-22.40512-27.93472-37.1712-51.38432-36.63872-23.53152 0.49152-43.54048 16.05632-49.82784 38.74816l-76.63616 277.42208c-16.42496-15.52384-36.22912-27.32032-58.34752-34.48832-80.91648-26.23488-168.05888 18.26816-194.27328 99.16416-12.6976 39.19872-9.37984 80.97792 9.33888 117.67808 18.7392 36.70016 50.62656 63.8976 89.82528 76.5952a153.8048 153.8048 0 0 0 47.45216 7.53664c65.06496 0 125.70624-41.53344 146.82112-106.7008 0.18432-0.57344 92.52864-334.82752 92.52864-334.82752 29.696 54.19008 67.60448 90.39872 111.57504 106.496 26.39872 9.66656 54.39488-9.6256 54.39488-37.72416v-1.59744c-0.02048-17.01888-10.89536-31.86688-26.84928-37.92896zM510.23872 857.78432c-18.37056-5.95968-33.32096-18.71872-42.10688-35.92192s-10.3424-36.80256-4.38272-55.17312c9.89184-30.55616 38.33856-50.03264 68.83328-50.03264 7.3728 0 14.86848 1.1264 22.24128 3.52256 18.37056 5.95968 33.32096 18.71872 42.10688 35.92192 7.68 15.03232 9.8304 31.88736 6.28736 48.16896l-2.08896 7.55712c-12.51328 37.60128-53.1456 58.20416-90.89024 45.95712zM135.33184 164.6592h618.82368c22.6304 0 40.96-18.3296 40.96-40.96s-18.3296-40.96-40.96-40.96H135.33184c-22.6304 0-40.96 18.3296-40.96 40.96 0 22.60992 18.3296 40.96 40.96 40.96zM135.33184 443.6992h394.09664c22.6304 0 40.96-18.3296 40.96-40.96s-18.3296-40.96-40.96-40.96H135.33184c-22.6304 0-40.96 18.3296-40.96 40.96 0 22.60992 18.3296 40.96 40.96 40.96zM225.34144 640.8192H135.33184c-22.6304 0-40.96 18.3296-40.96 40.96s18.3296 40.96 40.96 40.96h90.0096c22.6304 0 40.96-18.3296 40.96-40.96s-18.35008-40.96-40.96-40.96z"
                                    p-id="23648"
                                    fill="#7d8090"
                                ></path>
                            </svg>
                            <span>音频</span>
                        </div>
                        <div class="middle">
                            <svg
                                t="1666163185626"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="25801"
                                width="20"
                                height="20"
                            >
                                <path
                                    d="M198.7 292.7h0.9-0.9zM825.8 292.8c-0.3 0.1-0.6 0-0.9 0-14.8 0-26.9 12-26.9 26.9 0 14.8 12 26.9 26.9 26.9h0.3c44.3 0.2 80.3 36.3 80.3 80.6v312.1c0 20.8-8 39.7-20.9 54-6.1 6.7-13.3 12.4-21.4 16.8-11.4 6.2-24.4 9.9-38.3 9.9H199.6c-11 0-21.4-2.3-31-6.3-8.4-3.5-16.1-8.4-22.7-14.4-16.5-14.8-26.9-36.2-26.9-60V427.1c0-44.5 36.2-80.6 80.6-80.6h-0.4c14.6-0.2 26.4-12.1 26.4-26.8 0-14.8-12-26.9-26.9-26.9-73.7 0.5-133.5 60.5-133.5 134.3v312.1c0 71.4 56.1 129.8 126.5 134 2.6 0.2 5.2 0.4 7.9 0.4H825c26.3 0 50.9-7.7 71.6-20.9 5.5-3.5 10.8-7.4 15.7-11.6 28.7-24.7 47-61.2 47-101.9V427.1c0-73.8-59.8-133.8-133.5-134.3z m-0.4 53.7h0.4-0.4zM825 292.7h0.9-0.9z"
                                    fill="#7d8090"
                                    p-id="25802"
                                ></path>
                                <path
                                    d="M298.6 537.8l202.1 96.5c0.2 0.1 0.3 0.1 0.5 0.2 1.3 0.6 2.7 1 4.1 1.4 0.5 0.1 0.9 0.3 1.4 0.4 1.6 0.3 3.3 0.5 5 0.6 0.2 0 0.4 0.1 0.6 0.1 0.5 0 1-0.1 1.5-0.1s1 0.1 1.5 0.1c3.9 0 7.8-0.8 11.6-2.6l201.4-96.2c13.3-6.3 20.5-22 14.7-35.5-6-14.2-22.6-20.3-36.3-13.8l-167.2 79.9c-0.2 0.1-0.4 0-0.4-0.2V159.5c0-11.8-7.1-23.1-18.4-26.6-18.5-5.7-35.4 8-35.4 25.6V567c0 0.2-0.2 0.3-0.4 0.2l-164.2-78.4c-15.9-7.6-35.5 1.8-38.3 20.9-1.6 11.7 5.5 23 16.2 28.1z"
                                    fill="#7d8090"
                                    p-id="25803"
                                ></path>
                            </svg>
                            <span>缓存</span>
                        </div>
                        <div class="right">
                            <svg
                                t="1666163435882"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="27153"
                                width="20"
                                height="20"
                            >
                                <path
                                    d="M888.7 314.9c-9.9 0-17.9-8-17.9-17.9V153.6H709.4c-9.9 0-17.9-8-17.9-17.9 0-9.9 8-17.9 17.9-17.9h187.7c5.2 0 9.4 4.2 9.4 9.4V297c0.1 9.8-7.9 17.9-17.8 17.9z"
                                    fill="#7d8090"
                                    p-id="27154"
                                ></path>
                                <path
                                    d="M486.8 538.8c-7-7-7-18.3 0-25.3L876 123l25.3 25.3-389.2 390.5c-7 7-18.3 7-25.3 0z"
                                    fill="#7d8090"
                                    p-id="27155"
                                ></path>
                                <path
                                    d="M512.3 960.1C265 960.1 64.2 759.3 64.2 512c0-240.8 190.9-437.9 429.4-447.7 10.2-0.4 18.7 7.7 18.7 17.9 0 9.6-7.6 17.5-17.2 17.9C275.7 109.1 100 290.4 100 512c0 227.5 184.7 412.2 412.2 412.2 221.6 0 402.8-175.7 411.9-395.1 0.4-9.6 8.3-17.2 17.9-17.2 10.2 0 18.3 8.5 17.9 18.7-9.8 238.5-206.8 429.5-447.6 429.5z"
                                    fill="#7d8090"
                                    p-id="27156"
                                ></path>
                            </svg>
                            <span class="fenxiang">分享</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 视频详情 -->

        <div class="mainWrap">
            <el-card
                shadow="always"
                :body-style="{ padding: '20px 30px 30px' }"
            >
                <div class="desc">
                    <div class="videoName">
                        <div v-if="!homeStore.videoPlay.title" class="title">
                            八八八八
                        </div>
                        <div v-else class="title">
                            {{ homeStore.videoPlay.title }}
                        </div>
                        <div class="room">加入练习室</div>
                    </div>
                    <div class="authorMsg">
                        <div class="left">
                            <!-- <img class="avatarImg" :src="homeStore.videoPlay.creatorBackup.avatar" alt=""> -->
                            <span
                                v-if="!homeStore.videoPlay.creatorBackup"
                                class="authorName"
                                >12</span
                            >
                            <span v-else class="authorName">{{
                                homeStore.videoPlay.creatorBackup.name
                            }}</span>
                            <div class="plus">
                                <span class="add">+</span>
                                <span>关注</span>
                            </div>
                        </div>
                        <div class="time">发布时间：10-16</div>
                    </div>
                    <div v-if="!homeStore.videoPlay.summary" class="container">
                        转载自普宁倾扬-婉婉老西
                    </div>
                    <div v-else class="container">
                        <div
                            v-for="(
                                sum, idx
                            ) in homeStore.videoPlay.summary.split('\n')"
                            :key="idx"
                        >
                            <div style="margin-bottom: 10px">{{ sum }}</div>
                        </div>
                    </div>

                    <div class="top">
                        <span class="videoAuthor">原创作者：</span>
                        <span
                            v-if="!homeStore.videoPlay.creatorBackup"
                            class="name"
                            >八八八八</span
                        >
                        <span v-else class="name">{{
                            homeStore.videoPlay.creatorBackup.name
                        }}</span>
                    </div>
                    <div class="bottom">
                        <span class="videoAuthor">兴趣技能：</span>
                        <span v-if="!homeStore.videoPlay.relevancyAvocations"
                            >123</span
                        >
                        <span
                            v-else
                            class="name"
                            v-for="rele in homeStore.videoPlay
                                .relevancyAvocations"
                            >{{ rele }}、
                        </span>
                    </div>
                </div>
            </el-card>
            <el-card
                shadow="always"
                :body-style="{ padding: '20px' }"
                style="margin: 20px 0"
            >
                <span v-if="!homeStore.videoPlay.requireBackup">1</span>
                <el-badge
                    v-else
                    v-for="require in homeStore.videoPlay.requireBackup"
                    :key="require.requireType"
                    style="margin-right: 40px"
                    :value="100"
                    :max="10"
                    class="item"
                >
                    <el-button round color="#f9ebf1">{{
                        require.requireDesc
                    }}</el-button>
                </el-badge>
            </el-card>
            <el-card shadow="always" :body-style="{ padding: '20px' }">
                <!-- TA的相关 -->
                <div class="aboutBox">
                    <div class="textAbout">TA的相关</div>
                    <div
                        v-if="!homeStore.videoPlay.recommendMineBackup"
                        class="aboutVideo"
                    >
                        1
                    </div>
                    <div v-else class="aboutVideo">
                        <AboutDesc
                            :about="about"
                            v-for="about in homeStore.videoPlay
                                .recommendMineBackup"
                            :key="about.id"
                        />
                    </div>
                </div>
                <div class="recommendBox">
                    <div class="textAbout">更多推荐</div>
                    <div
                        v-if="!homeStore.videoPlay.recommendMineBackup"
                        class="aboutVideo"
                    >
                        1
                    </div>
                    <div v-else class="aboutVideo">
                        <AboutDesc
                            :about="about"
                            v-for="about in homeStore.videoPlay
                                .recommendOtherBackup"
                            :key="about.id"
                        />
                    </div>
                </div>
            </el-card>
            <!-- 相关练习室 -->
            <el-card shadow="always" class="slot_header">
                <div slot="header">
                    <span class="header_title">相关练习室</span>
                    <div class="header_img">
                        <img
                            src="https://rs.dance365.com/photo/ff80808183d5a6490183d71289133a47_rs_38b3ae957d0e4b65b8b53be9b54779ac.jpg"
                        />
                    </div>
                    <div class="header_right">
                        <div class="header_right_title">小河淌水</div>
                        <div class="header_right_contect">
                            2个内容.一人已加入
                        </div>
                        <div class="header_right_btn">加入</div>
                    </div>
                </div>
                <!-- card body -->
            </el-card>
            <!-- 留言 -->
            <el-card
                shadow="always"
                :body-style="{ padding: '20px' }"
                style="margin: 20px 0"
            >
                <div class="comment">
                    <div class="login">
                        <div class="avatar">
                            <svg
                                style="margin-right=10px;"
                                t="1666163519958"
                                class="icon"
                                viewBox="0 0 1024 1024"
                                version="1.1"
                                xmlns="http://www.w3.org/2000/svg"
                                p-id="12153"
                                width="40"
                                height="40"
                            >
                                <path
                                    d="M512 0a512 512 0 1 0 512 512A512 512 0 0 0 512 0zM213.333 832A298.667 298.667 0 0 1 512 533.333a170.667 170.667 0 1 1 170.667-170.666A170.667 170.667 0 0 1 512 533.333 298.667 298.667 0 0 1 810.667 832z"
                                    p-id="12154"
                                    fill="#bfbfbf"
                                ></path>
                            </svg>
                        </div>
                        <div class="tip">
                            <a class="toLogin" href="">登录</a>
                            <span>后发表留言</span>
                        </div>
                    </div>
                    <div class="message">留言（0）</div>
                </div>
                <div class="footer">
                    <img
                        class="noMsg"
                        src="https://rs.dance365.com/img/no_message@3x.2f295517.png"
                        alt=""
                    />
                    <p>暂无留言</p>
                </div>
            </el-card>
        </div>
    </div>
    <Footer />
</template>

<script setup lang="ts">
import AboutDesc from "./aboutDesc/index.vue";
import { onMounted, reactive, ref } from "vue";
//@ts-ignore
import { videoPlay } from "vue3-video-play";
import "vue3-video-play/dist/style.css";
import useHomeStore from "@/stores/modules/home";
import { nextTick } from "vue";
import homeApi, { type VideoPlayModel } from "@/api/mockHome";
const homeStore = useHomeStore();
console.log(homeStore);

onMounted(() => {
    homeStore.getVideoPlay();
});

const options = reactive({
    src: "https://cdn.jsdelivr.net/gh/xdlumia/files/video-play/IronMan.mp4", //视频源
    poster: "https://pic.rmb.bdstatic.com/bjh/video/660b51ca34d88ee88f645cf5029e1987.jpeg@s_0,w_800,h_1000,q_80,f_auto", //封面
});
const onPlay = (ev: any) => {
    console.log("播放");
};
const onPause = (ev: any) => {
    console.log(ev, "暂停");
};
const onTimeupdate = (ev: any) => {
    console.log(ev, "时间更新");
};
const onCanplay = (ev: any) => {
    console.log(ev, "可以播放");
};
</script>
<style scoped lang="scss">
.video_wrap {
    width: 100%;
    height: 664px;
    background-color: #1e1e1e;
    margin: 0 auto;
    padding-top: 1px;

    .box {
        width: 100%;
        display: flex;
        flex-direction: column;

        align-items: center;
        margin-top: 10px;

        .video_bottom {
            display: flex;
            justify-content: space-between;
            width: 1060px;
            height: 59px;
            background-color: #121212;
            padding: 18px 20px;
            box-sizing: border-box;

            .video_bottom_left {
                display: flex;

                .left_icon {
                    display: flex;

                    .shipin {
                        margin: 0 10px 0 0;
                    }
                }

                span {
                    margin-right: 45px;
                    color: #7d8090;
                }

                .middle_icon {
                    display: flex;

                    .dianzan {
                        margin: 0 10px 0 0;
                        width: 20px;
                        height: 20px;
                        background: url(https://rs.dance365.com/img/details_love.17436999.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }

                    .dianzan:hover {
                        width: 20px;
                        height: 20px;
                        background: url(https://rs.dance365.com/img/details_love_into.050a58f6.png)
                            no-repeat;
                        background-size: 100% 100%;
                    }
                }

                .right_icon {
                    display: flex;

                    .shoucang {
                        width: 20px;
                        height: 20px;
                        background: url(https://rs.dance365.com/img/details_collectio.5152d910.png)
                            no-repeat;
                        background-size: 100% 100%;
                        margin: 0 10px 0 0;
                    }

                    .shoucang:hover {
                        width: 20px;
                        height: 20px;
                        background: url(https://rs.dance365.com/img/details_collectio_into.d5975887.png)
                            no-repeat;
                        background-size: 100% 100%;
                        margin: 0 10px 0 0;
                    }
                }
            }

            .video_bottom_right {
                display: flex;
                color: #7d8090;
                font-size: 14px;

                span {
                    margin-left: 10px;
                    padding-right: 26px;
                    border-right: 1px solid #7d8090;
                    vertical-align: 6px;
                }

                .left,
                .middle,
                .right {
                    margin-left: 26px;
                }

                .right {
                    border-right: none;

                    .fenxiang {
                        border-right: none;
                    }
                }
            }
        }
    }
}

.slot_header {
    width: 1060px;
    margin: 30px auto;

    .header_title {
        color: #111;
        font-size: 24px;
        margin-bottom: 10px;
    }

    .header_img {
        img {
            margin: 23px 0px;
            width: 240px;
            height: 134px;
            border-radius: 4px;
            float: left;
        }
    }

    .header_right {
        float: left;
        margin: 23px 30px 23px 30px;

        .header_right_title {
            font-size: 16px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #111;
            line-height: 24px;
            height: 60px;
        }

        .header_right_contect {
            font-size: 14px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            color: #7d808f;
            height: 40px;
        }

        .header_right_btn {
            width: 56px;
            height: 32px;
            border: 1px solid #f93684;
            border-color: #f93684;
            font-size: 12px;
            color: #f93684;
            background-color: #feebf3;
            border-radius: 20px;
            text-align: center;
            line-height: 32px;
        }
    }
}
</style>
<style scoped>
.wrap {
    width: 100%;
    height: 100%;
    background-color: #f5f7f9;
}

.mainWrap {
    width: 1060px;
    height: 100%;
    margin: 0px auto;
}

.videoName {
    /* width: 1000px; */
    font-size: 20px;
    height: 42px;
    /* padding: 20px 30px 30px 30px; */
}

/* 加入练习室按钮 */
.room {
    float: right;
    width: 106px;
    height: 40px;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    border-radius: 20px;
    color: #f93684;
    border: 1px solid #f93684;
    cursor: pointer;
}

.title {
    float: left;
}

.authorMsg {
    /* width: 300px; */
    height: 40px;
    padding-top: 19px;
}

.left {
    float: left;
}

.avatarImg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 9px;
    float: left;
}

.authorName {
    font-size: 16px;
    line-height: 40px;
    height: 40px;
    margin-right: 50px;
    float: left;
}

.plus {
    color: #f93684;
    background-color: #f9ebf1;
    border-radius: 20px;
    font-size: 14px;
    text-align: center;
    padding: 10px 0;
    border: 1px solid #f9ebf1;
    width: 86px;
    display: inline-block;
    cursor: pointer;
}

.add {
    font-weight: 100;
}

.plus:hover {
    background-color: #fed7e6;
}

.time {
    color: #b1b5c1;
    vertical-align: middle;
    float: right;
    margin-top: 13px;
}

.container {
    /* height: 40px; */
    /* line-height: 40px; */
    border-bottom: 1px solid #e3e3e3;
    padding-top: 30px;
    padding-bottom: 10px;
    font-size: 16px;
}

.top {
    margin: 20px 0 10px;
}

.videoAuthor {
    font-size: 16px;
}

.name {
    color: #f93684;
}

/* ta的相关 */
.aboutBox,
.recommendBox {
    width: 1020px;
    padding: 23px 0px 30px;
    margin: 0 20px;
}

.aboutVideo {
    display: flex;
}

.textAbout {
    padding-bottom: 23px;
    color: #111;
    font-size: 24px;
}

/* 留言 */
.comment {
    padding: 20px 20px 30px;
}

/* 未登录提示 */
.login {
    margin-bottom: 20px;
    display: flex;
    /* justify-content: space-around;  */
}

.avatar {
    padding-right: 10px;
}

.tip {
    flex: 1;
    display: flex;
    justify-content: center;
    width: 970px;
    height: 62px;
    background-color: #f5f7f9;
    border-radius: 4px;
    border: 1px solid #eaecf0;
    /* line-height: 60px; */
}

.toLogin,
.tip span {
    font-size: 15px;
    line-height: 60px;
    height: 60px;
}

.toLogin {
    color: #f93684;
    margin: 0 15px;
    cursor: pointer;
}

.tip span {
    color: #b1b5c1;
}

/* 留言 */
.message {
    font-size: 24px;
    color: #111;
    line-height: 40px;
    border-bottom: 1px solid #eaecf0;
    padding-bottom: 15px;
}

.footer {
    padding-top: 16px;
}

.noMsg {
    display: block;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.footer p {
    display: block;
    margin: 20px auto 40px;
    color: rgb(177, 181, 193);
    text-align: center;
}
</style>
